<template>
  <div style="background: transparent">
    <el-scrollbar height="100%">
      <div class="analysis_wrapper">
        <div class="chart_wrapper left_chart_wrapper ">
          <v-chart class="left_linear_chart" :option="npkDataWeekLinearOption" autoresize />
        </div>
        <div class="chart_wrapper right_chart_wrapper ">
          <v-chart class="right_linear_chart" :option="phDataWeekLinearOption" autoresize />
        </div>
        <div class="chart_wrapper left_chart_wrapper " >
          <v-chart class="left__linear_chart" :option="temperatureWeekLinearOption" autoresize />
        </div>
        <div class="chart_wrapper right_chart_wrapper ">
          <v-chart class="right_linear_chart" :option="waterRateWeekLinearOption" autoresize />
        </div>
      </div>
    </el-scrollbar>
  </div>
</template>

<script setup lang="ts" name="systemDuorouKgbotcamFileDataAnalysis">
import {Ref } from 'vue';
/**
 * 引入使用vcharts组件
 */
import VChart, { THEME_KEY } from 'vue-echarts';
import {  provide } from 'vue';

/**
 * 针对不同的图表按需引入对应的内容
 */
import { use } from 'echarts/core'
import { LineChart } from 'echarts/charts'
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  ToolboxComponent,
  GridComponent
} from 'echarts/components'
import { CanvasRenderer } from 'echarts/renderers'
import type { ComposeOption } from 'echarts/core'
import type { LineSeriesOption } from 'echarts/charts'
import type {
  TitleComponentOption,
  TooltipComponentOption,
  LegendComponentOption,
  ToolboxComponentOption,
  GridComponentOption
} from 'echarts/components'

use([
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  ToolboxComponent,
  GridComponent,
  LineChart,
  CanvasRenderer
])

type EChartsLinearOption = ComposeOption<
    | TitleComponentOption
    | TooltipComponentOption
    | LegendComponentOption
    | ToolboxComponentOption
    | GridComponentOption
    | LineSeriesOption
    >


/**
 * 引入获取图表数据API
 */
import {getDataAnalysisByWeek,getDataAnalysisByMonth} from "/@/api/duorou/duorouKgnpkDevData";

/**
 * 定义组件属性 接收传递来的 大棚ID
 */
const props = defineProps({
  iotDevice: {
    type:Object,
    default: () => {},
  },
})

/**
 * 去除模板中直接使用的state自定义一个自己需要使用的 页面state
 */
const thisPageState = reactive({
  iotDevice: props.iotDevice,//设备信息
})
console.log("测试",thisPageState)


//调用vcharts方法设置chart.init方法中的配置
// provide(THEME_KEY, 'dark');

/**
 * 左上图1 NPK检测 以周几为横坐标的折线图
 */
const npkDataWeekLinearOption:Ref<EChartsLinearOption>=ref({
      title: {
        text: '氮磷钾分析曲线图-周',
        textStyle:{
          fontWeight:"normal",
          fontSize:"13px"
        },
      },
      tooltip: {
        trigger: 'axis'
      },
      legend: {
        data: ['土壤含氮量(mg/kg)', '土壤含磷量(mg/kg)', '土壤含钾量(mg/kg)']
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      // toolbox: {
      //   feature: {
      //     saveAsImage: {}
      //   }
      // },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
      },
      yAxis: {
        type: 'value'
      },
      series: [
          //stack total会把数量加起来堆叠显示
        {
          name: '土壤含氮量(mg/kg)',
          type: 'line',
          stack: 'Total',
          data: [] //0, 100, 300, 100, 290, 330, 310
        },
        {
          name: '土壤含磷量(mg/kg)',
          type: 'line',
          stack: 'Total',
          data: [] //220, 182, 191, 234, 290, 330, 310
        },
        {
          name: '土壤含钾量(mg/kg)',
          type: 'line',
          stack: 'Total',
          data: [] //150, 232, 201, 154, 190, 330, 410
        },
      ]
    })



/**
 * 右上图2ph值检测 统计分析-周
 */
const phDataWeekLinearOption:Ref<EChartsLinearOption>=ref({
  title: {
    text: '土壤Ph分析曲线图-周',
    textStyle:{
      fontWeight:"normal",
      fontSize:"13px"
    },
  },
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    data: ['土壤PH值(PH)']
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  // toolbox: {
  //   feature: {
  //     saveAsImage: {}
  //   }
  // },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    //stack total会把数量加起来堆叠显示
    {
      name: '土壤PH值(PH)',
      type: 'line',
      data: [], //0, 100, 300, 100, 290, 330, 310
      itemStyle: {
        color: '#73c0de'  // 指定线的颜色为红色
      },
    }
  ]
})

/**
 * 左下图3 土壤温度值检测 统计分析-周
 */
const temperatureWeekLinearOption:Ref<EChartsLinearOption>=ref({
  title: {
    text: '土壤温度分析曲线图-周',
    textStyle:{
      fontWeight:"normal",
      fontSize:"13px"
    },
  },
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    data: ['土壤温度(℃)']
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  // toolbox: {
  //   feature: {
  //     saveAsImage: {}
  //   }
  // },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    //stack total会把数量加起来堆叠显示
    {
      name: '土壤温度(℃)',
      type: 'line',
      data: [], //0, 100, 300, 100, 290, 330, 310
      itemStyle: {
        color: '#ee6666'  // 指定线的颜色为红色
      },
    }
  ]
})


/**
 * 右下图3 土壤含水率分析曲线图 统计分析-周
 */
const waterRateWeekLinearOption:Ref<EChartsLinearOption>=ref({
  title: {
    text: '土壤含水率分析曲线图-周',
    textStyle:{
      fontWeight:"normal",
      fontSize:"13px"
    },
  },
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    data: ['土壤容积含水率(%)']
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  // toolbox: {
  //   feature: {
  //     saveAsImage: {}
  //   }
  // },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    //stack total会把数量加起来堆叠显示
    {
      name: '土壤容积含水率(%)',
      type: 'line',
      data: [], //0, 100, 300, 100, 290, 330, 310
      itemStyle: {
        color: '#91cc75'  // 指定线的颜色为红色
      },
    }
  ]
})



/**
 * 获取一周的数据统计 NPK 图1 的数据
 */
function getNpkDataWeekLinearChartData(){
  const query={
    iotDeviceId:thisPageState.iotDevice.id,
    measureName:"土壤含氮量" //todo 这个名字 后面统一规定
    // predictStatus:null, //多肉状态 待检测、健康、不健康
  }
  getDataAnalysisByWeek(query).then(res=>{
    // 提取 measureValue 字段值
    const measureValues = res.data.map(item => item.measureValue);
    npkDataWeekLinearOption.value.series[0].data=measureValues
  })
  query.measureName="土壤含钾量"
  getDataAnalysisByWeek(query).then(res=>{
    // 提取 measureValue 字段值
    const measureValues = res.data.map(item => item.measureValue);
    npkDataWeekLinearOption.value.series[1].data=measureValues
  })
  query.measureName="土壤含磷量"
  getDataAnalysisByWeek(query).then(res=>{
    // 提取 measureValue 字段值
    const measureValues = res.data.map(item => item.measureValue);
    npkDataWeekLinearOption.value.series[2].data=measureValues
  })
}
getNpkDataWeekLinearChartData()



/**
 * 获取一周的数据统计 PH 图2 的数据
 */
function getPHDataWeekLinearChartData(){
  const query={
    iotDeviceId:thisPageState.iotDevice.id,
    measureName:"土壤pH值" //todo 这个名字 后面统一规定
  }
  getDataAnalysisByWeek(query).then(res=>{
    // 提取 measureValue 字段值
    const measureValues = res.data.map(item => item.measureValue);
    phDataWeekLinearOption.value.series[0].data=measureValues
  })
}
getPHDataWeekLinearChartData()

/**
 * 获取一周的数据统计 PH 图2 的数据
 */
function getTemperatureDataWeekLinearChartData(){
  const query={
    iotDeviceId:thisPageState.iotDevice.id,
    measureName:"土壤温度" //todo 这个名字 后面统一规定
  }
  getDataAnalysisByWeek(query).then(res=>{
    // 提取 measureValue 字段值
    const measureValues = res.data.map(item => item.measureValue);
    temperatureWeekLinearOption.value.series[0].data=measureValues
  })
}
getTemperatureDataWeekLinearChartData()

/**
 * 获取一周的数据统计 PH 图2 的数据
 */
function getWaterRateDataWeekLinearChartData(){
  const query={
    iotDeviceId:thisPageState.iotDevice.id,
    measureName:"土壤容积含水率" //todo 这个名字 后面统一规定
  }
  getDataAnalysisByWeek(query).then(res=>{
    // 提取 measureValue 字段值
    const measureValues = res.data.map(item => item.measureValue);
    waterRateWeekLinearOption.value.series[0].data=measureValues
  })
}
getWaterRateDataWeekLinearChartData()




/**
 * 获取月统计数据
 */
function getMonthLinearChartData(){
  const query={
    iotDeviceId:thisPageState.iotDevice.id,
    // predictStatus:null, //多肉状态 待检测、健康、不健康
  }
  // getDataAnalysisByMonth(query).then(res=>{
  //
  // })
}
getMonthLinearChartData()

</script>

<style scoped lang="scss">
.analysis_wrapper{
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 15px;
  .el-scrollbar{
    background-color: var(--next-bg-main-color);
  }
  .chart_wrapper{
    width: 49%;
    padding: 10px;
    height: 339px;
  }
  .left_chart_wrapper{
    //background-color: var(--next-bg-main-color);
    .left_linear_chart{
      //width: 100%;
      //height: 100%;
    }
  }
  .right_chart_wrapper{
  }
}
</style>